<template>
  <div class="part">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>行政管理</el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <div class="partsearch">
      部门查询：<el-input
        placeholder="请输入查询的部门"
        v-model="input"
        clearable
        class="input"
        @focus="tablejlf = false"
      >
      </el-input>
      <el-button type="primary">部门查询</el-button>
      <el-button type="success" @click="dialogFormVisible = true"
        >新建部门</el-button
      >
    </div>
    <div>
      <!-- 部门展示 -->
      <el-table :data="tableData" style="width: 50%">
        <el-table-column prop="Department" label="部门名称" width="100">
        </el-table-column>
        <el-table-column prop="Departlevel" label="部门等级权限" width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="lookpeople(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button
              @click="delpart(scope.row)"
              type="text"
              size="small"
              class="del"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="权限分配">
          <template slot-scope="scope">
            <el-button @click="updata(scope.row)" type="primary" size="small"
              >权限分配</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="addpart" v-show="dialogFormVisible">
        <!-- 新建部门 -->
        <div class="parttitle" style="text-align: center">新建部门</div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="部门名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="部门等级">
            <el-select v-model="form.region" placeholder="请选择部门等级">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
              <el-option label="5" value="5"></el-option>
              <el-option label="6" value="6"></el-option>
              <el-option label="7" value="7"></el-option>
              <el-option label="8" value="8"></el-option>
              <el-option label="9" value="9"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table2" v-show="tablejlf">
        <!-- 部门人员 -->
        <div class="parttitle">
          {{ title }}人员
          <el-button
            type="danger"
            plain
            size="small"
            class="btn"
            @click="tablejlf = false"
            >关闭</el-button
          >
        </div>
        <el-table :data="gridData">
          <el-table-column
            property="UserName"
            label="姓名"
            width="100"
          ></el-table-column>
          <el-table-column
            property="Sex"
            label="性别"
            width="100"
          ></el-table-column>
          <el-table-column property="Telephone" label="电话"></el-table-column>
          <el-table-column
            property="Department"
            label="所在部门"
          ></el-table-column>
          <el-table-column property="Position" label="职位"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "", //搜索框绑定的value
      tableData: [], //渲染数组
      datalist: [], //存放数据
      title: "", //抽屉标题
      gridData: [], //抽屉数据
      tablejlf: false, //抽屉节流阀
      dialogFormVisible: false, //新建表单节流阀
      form: {
        //新建表单
        name: "",
        region: "",
      },
    };
  },
  created() {
    this.getdata();
  },
  watch: {
    input: {
      immediate: true,
      handler(v) {
        var arr = [];
        this.tableData = this.datalist.filter((item) => {
          return item.Department.indexOf(v) >= 0;
        });
      },
    },
  },
  methods: {
    getdata() {
      //初始化数据
      var that = this;
      this.$axios.get("http://127.0.0.1:9090/allpart").then(function (res) {
        that.datalist = res.data.data;
        that.tableData = that.datalist;
      });
    },
    lookpeople(v) {
      //查看部门人员
      var that = this;
      var id = v.DepartmentId;
      this.title = v.Department;
      this.tablejlf = true;
      this.$axios.get(`/partpeople?id=${id}`).then(function (res) {
        that.gridData = res.data.data;
      });
    },
    delpart(v) {
      //根据id，删除部门
      var that = this;
      var id = v.DepartmentId;
      this.$axios.get(`/partpeople?id=${id}`).then(function (res) {
        if (res.data.data.length == 0) {
          that.$axios.get(`/delpart?id=${id}`).then(function (res) {
            if (res.data.state == 1) {
              alert("删除成功");
              that.getdata();
            }
          });
        } else {
          alert(`该部门还有${res.data.data.length}位员工，不能删除`);
        }
      });
    },
    onSubmit() {
      //新建部门提交
      var name = this.form.name;
      var level = this.form.region;
      var that = this;
      this.$axios({
        method: "post",
        url: "/add_part",
        data: {
          department: name,
          partlevel: level,
        },
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("新建成功");
          that.getdata();
          that.form.name = "";
          that.form.region = "";
        }
      });
    },
    updata(v) {
      //部门权限修改
      this.$router.push({
        path: "/maniger",
        query: {
          level: v.Departlevel,
          part: v.Department,
          partid: v.DepartmentId,
        },
      });
    },
  },
};
</script>

<style>
.partsearch {
  width: 100%;
  height: 40px;
  margin: 10px 0;
  text-align: left;
}
/* table单元格 */
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  transition: background-color 0.25s ease;
  text-align: center;
}
.part {
  position: relative;
}

.part .del {
  color: red;
}

/* 新建 */
.addpart {
  width: 40%;
  position: absolute;
  right: 40px;
  top: 50px;
  background: #fff;
  padding: 15px;
  text-align: left;
  border-radius: 5px;
}

.input {
  width: 180px;
}

.part .parttitle {
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  text-align: left;
}

.el-button {
  margin: 0 10px;
}

.el-table {
  border-radius: 5px;
}

.table2 {
  margin: 10px 0;
}

.table2 .btn {
  margin: 0 0px 10px 350px;
}
</style>